import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
  ScrollView,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import Tabs from '../../components/Tabs';
import styles from './style';
import {Icon, TextareaItem, InputItem} from '@ant-design/react-native';
import Banner from '../../components/Banner';
// import CouseList from '../../components/CouseList';
import ExamList from '../../components/ExamList';
import BaseUrl from '../../config/BaseUrl';
import {courseList} from '../../service/my';
import {getPaperlist} from '../../service/common';

const navList = [
  {
    name: 'TB练习',
    id: 1,
    // route: 'TBConsult',
    route: 'Simulation',
    url: require('../../assets/images/study/study_icon1.png'),
  },
  {
    name: '知识库',
    id: 2,
    // route: 'GuessGame',
    route: 'OnLineCouse',
    url: require('../../assets/images/study/study_icon2.png'),
  },
  {
    name: '题库',
    id: 3,
    route: 'QuestionManage',
    url: require('../../assets/images/study/study_icon3.png'),
  },
  {
    name: '标注训练',
    id: 4,
    // route: 'GuessGame',
    route: 'LabelList',
    url: require('../../assets/images/study/study_icon4.png'),
  },
];
const Study = () => {
  const navigation = useNavigation();
  
  const [pn, setPn] = useState(1);
  const [list, setList] = useState([]);
  const [couses, setCouses] = useState([]);
  useEffect(() => {
    courseList({pn, ps: 10, custId: 100016}).then((res) => {
      console.log(res, 'courseList');
      setList(res.rows);
    });

    getPaperlist({epClazz: '01', epScene: '01', epType: '712a7ca0390645e3a30f0c677ef2cdd3'}).then((res) => {
      console.log(res);
      setCouses([...res.rows]);
    });
  }, [pn]);
  
  const onPressList = (item) => {
    navigation.push('QuesDetail', {
      epId: item.epId,
    });
  };

  return (
    <AreaView>
      <ScrollView>
        <View style={styles.wrapper_container}>
          <Banner />
        </View>
        <View style={styles.nav_container}>
          {navList?.map((item) => (
            <TouchableOpacity
              onPress={() => {
                navigation.push(item.route);
              }}
              key={item.id}
              style={styles.nav_list}>
              <Image style={styles.nav_icon} source={item.url} />
              <Text style={styles.nav_text}>{item.name}</Text>
            </TouchableOpacity>
          ))}
        </View>
        <View style={styles.gap} />
        <View style={styles.content_container}>
          <View style={styles.head_title}>
            <View style={styles.line} />
            <Text style={styles.title_text}>我的课程</Text>
          </View>
          <View>
            <Tabs />
            <ScrollView
              showsHorizontalScrollIndicator={false}
              horizontal={true}>
              {list?.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  onPress={() => {
                    // navigation.push('VideoDetail', {courseId: item.courseId});
                    navigation.push('ListenCouse', {courseId: item.courseId});
                  }}
                  style={styles.prd_list}
                  activeOpacity={1}>
                  <Image style={styles.cover}
                    source={{uri: BaseUrl.imgurl + item.courseImage}}
                  />
                  <Text numberOfLines={1} style={styles.desc}>
                    {item.courseIntr}
                  </Text>
                </TouchableOpacity>
              ))}

              {/* <TouchableOpacity
                onPress={() => {
                  navigation.push('VideoDetail');
                }}
                style={styles.prd_list}
                activeOpacity={1}>
                <Image style={styles.cover} />
                <Text numberOfLines={1} style={styles.desc}>
                  文字描述文字描述文字文字描述文字描述文字
                </Text>
              </TouchableOpacity> */}
              
            </ScrollView>
          </View>
        </View>
        <View style={styles.gap} />
        <View style={styles.content_container}>
          <View style={styles.head_title}>
            <View style={styles.line} />
            <Text style={styles.title_text}>每日训练</Text>
          </View>
          {/* <CouseList /> */}
          {(couses || []).map((item) => (
            <ExamList
              key={item.epId}
              item={item}
              onPress={() => onPressList(item)}
            />
          ))}
        </View>
      </ScrollView>
    </AreaView>
  );
};

export default Study;
